<template>
  <Card title="" v-bind="$attrs">
    <!-- <template #extra>
      <a-button type="link" size="small">更多</a-button>
    </template> -->
    <CardGrid v-for="(item, i) in insideList" :key="i" class="!md:w-1/3 !w-full">
      <div class="flex justify-evenly" style="gap: 0px;color: #4f4f4f;">
        <Icon :icon="item.icon" :color="item.color" :size="60" />
        <div class="flex justify-center text-center" style="flex-direction: column;width: 80px;font-size: 1rem;">
          <span>{{ item.title }}</span>
          <CountTo prefix="" :startVal="1" :endVal="item.count" class="count-to" />
        </div>
      </div>
    </CardGrid>
  </Card>
</template>
<script lang="ts" setup>
import { Card, CardGrid } from 'ant-design-vue';
import { ref, watch } from "vue";
import { GroupItem } from './data';
import { CountTo } from '/@/components/CountTo/index';
import { Icon } from '/@/components/Icon';

const props = defineProps({
  list: {type:Array<GroupItem>, default: () => []},
})

const insideList = ref<GroupItem[]>()
watch(()=>props.list, (v1, _) => {
  if (v1 && v1.length > 0) {
    insideList.value = v1
  }
}, {immediate: true, deep: true,})

</script>

<style scoped>
.count-to{
  font-weight: bold;
  color: #3f3f3f;
  font-size: 1.2rem;
}
</style>
